<template>
    <div :class="['back-top-box',{'back':moreThan40}]" @click="scrollToTop">
        <i class="iconfont icon-xiangshang"></i>
    </div>
</template>

<script>

export default {
    name: 'BackTop',
    components: {
    },
    methods: {
        scrollToTop() {
            window.scroll({
                top: 0, // top: 表示移动到距离顶部的位置大小
                behavior: 'smooth'
            })
        }
    },
    computed: {
        moreThan40() {
            return this.$store.state.scrollTop > 40
        }
    }
}
</script>

<style lang="scss" scoped>
.back-top-box {
    width: 50px;
    height: 50px;
    background-color: #fff;
    position: fixed;
    border-radius: 8px;
    right: 20px;
    bottom: 20px;
    line-height: 50px;
    text-align: center; 
    box-shadow: 0px 0px 5px rgb(0 0 0 / 20%);
    cursor: pointer;
    transform: translateX(80px);
    transition: all 0.3s;
}

.back {
    transform: translateX(0);

}
</style>